<template>
	<div class="jinx">
		
	
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="家居生活" name="first">
    	<div class="s" >
    		<dl v-for='(index,value) in ban2' @click="dianj('xianQing',index)">
    			<router-link to="/xianQing">
    			<dt><img v-bind:src="index.image_long_url"/></dt>
    			<dd>{{index.name}}</dd>
    			</router-link>
    		</dl>
    	</div>
    </el-tab-pane>
    <el-tab-pane label="家用电器" name="second">
    	<div class="s" >
    		<dl v-for='(index,value) in ban3' @click="dianj('xianQing',index)">
    			<router-link to="/xianQing">
    			<dt><img v-bind:src="index.image_long_url"/></dt>
    			<dd>{{index.name}}</dd>
    			</router-link>
    		</dl>
    	</div>
    </el-tab-pane>
    <el-tab-pane label="服饰鞋包" name="third">
    	<div class="s" >
    		<dl v-for='(index,value) in ban4' @click="dianj('xianQing',index)">
    			<router-link to="/xianQing">
    			<dt><img v-bind:src="index.image_long_url"/></dt>
    			<dd>{{index.name}}</dd>
    			</router-link>
    		</dl>
    	</div>
    </el-tab-pane>
    <el-tab-pane label="美容化妆" name="fourth">
    	<div class="s" >
    		<dl v-for='(index,value) in ban5' @click="dianj('xianQing',index)">
    			<router-link to="/xianQing">
    			<dt><img v-bind:src="index.image_long_url"/></dt>
    			<dd>{{index.name}}</dd>
    			</router-link>
    		</dl>
    	</div>
    </el-tab-pane>
    <el-tab-pane label="美食特长" name="meishi">
    	<div class="s" >
    		<dl v-for='(index,value) in ban6' @click="dianj('xianQing',index)">
    			<router-link to="/xianQing">
    			<dt><img v-bind:src="index.image_long_url"/></dt>
    			<dd>{{index.name}}</dd>
    			</router-link>
    		</dl>
    	</div>
    </el-tab-pane>
    <el-tab-pane label="珠宝饰品" name="zhubao">
    	<div class="s" >
    		<dl v-for='(index,value) in ban7' @click="dianj('xianQing',index)">
    			<router-link to="/xianQing">
    			<dt><img v-bind:src="index.image_long_url"/></dt>
    			<dd>{{index.name}}</dd>
    			</router-link>
    		</dl>
    	</div>
    </el-tab-pane>
  </el-tabs>
	<div class="xqye">
		
	</div>
</div>
</template>
<script>
import $ from 'jquery';
import Router from 'vue-router';
import axios from 'axios';

export default {
  name: 'shouye',
  data() {
        return {
         	activeName: 'first',
			ban2:[],
			ban3:[],
			ban4:[],
			ban5:[],
			ban6:[],
			ban7:[],
        }
    },
    methods:{
    	handleClick(tab, event) {
	        console.log(tab, event);
	      },
	      dianj(z,index){
	      	this.$router.push({path:z})
	      	eventBus.$emit('data',index)
	      },
	  
    //调取数据
    aaa(){
        var _this = this;                	axios.get('http://localhost:8080/static/data/01_1.json').then(function (data){
                _this.ban = data.data.msg[0].url
                  console.log( _this.ban)
            })
                	axios.get('http://localhost:8080/static/data/02_2.json').then(function (data){
                _this.ban2 = data.data.msg.productShows
             console.log( _this.ban2)
            })
    axios.get('http://localhost:8080/static/data/02_3.json').then(function (data){
                _this.ban3 = data.data.msg.productShows
             console.log( _this.ban3)
            })
                	axios.get('http://localhost:8080/static/data/02_4.json').then(function (data){
                _this.ban4 = data.data.msg.productShows
             console.log( _this.ban4)
            })
                	axios.get('http://localhost:8080/static/data/02_5.json').then(function (data){
                _this.ban5 = data.data.msg.productShows
             console.log( _this.ban5)
            })
                	axios.get('http://localhost:8080/static/data/02_6.json').then(function (data){
                _this.ban6 = data.data.msg.productShows
             console.log( _this.ban6)
            })
                	axios.get('http://localhost:8080/static/data/02_6.json').then(function (data){
                _this.ban7 = data.data.msg.productShows
             console.log( _this.ban7)
            })

        },           
    },  
    mounted(){
        this.aaa();        
    }
}
</script>


<style>
	.jinx{
		position: relative;
	}
	.el-tabs{
		margin-top: 20px;
		/*position:fixed;*/
	}
	.el-tabs__header{
		position: fixed;
		top: 35px;
		left:0;
		z-index: 9999;
		background: white;
	}
	.s{
		width: 100%;
		height: 100%;		
	}
	.s dl{
		position:relative;
		width: 100%;
		height: 200px;		
	}
	.s dl dt{
		width: 100%;
		height:100%;
	}
	.s dl dt img{
		width: 100%;
		height:100%;		
	}
	.s dl dd{
		position: absolute;
		bottom:0;
	}

</style>